<template>
  <div class="app-container">
    <div class="search-container" style="display: flex">
      <el-form-item label="省份" style="width: 200px">
        <el-select
          @change="provinceChange"
          v-model="params.fprovince"
          placeholder="请选择省份"
        >
          <el-option
            v-for="v in provinceList"
            :key="v.provinceId"
            :label="v.pname"
            :value="v.provinceId"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="城市" style="width: 200px; margin-left: 10px">
        <el-select v-model="params.fcity" placeholder="请选择市">
          <el-option
            v-for="v in cityList"
            :key="v.cityId"
            :label="v.cityName"
            :value="v.cityId"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="预估等级" style="width: 200px; margin-left: 10px">
        <el-select placeholder="请选择等级" v-model="params.aqiPreId">
          <el-option label="优（一）" :value="1" />
          <el-option label="良（二）" :value="2" />
          <el-option label="轻度污染（三）" :value="3" />
          <el-option label="中度污染（四）" :value="4" />
          <el-option label="重度污染（五）" :value="5" />
          <el-option label="严重污染（六）" :value="6" />
        </el-select>
      </el-form-item>

      <el-form-item label="反馈日期" style="width: 200px; margin-left: 10px">
        <el-date-picker
          v-model="params.fdatetime"
          @change="datePickerChange"
          type="date"
          placeholder="请选择"
        />
      </el-form-item>
      <el-button type="primary" style="margin-left: 10px" @click="clearParams"
        >清空</el-button
      >
      <el-button type="primary" style="margin-left: 10px" @click="handleSearch"
        >查询</el-button
      >
      <el-form-item label="" style="width: 200px; margin-left: 10px">
        <el-radio-group v-model="params.state" @change="stateRadioChange">
          <el-radio name="type" :value="0">未指派</el-radio>
          <el-radio name="type" :value="1">已指派</el-radio>
        </el-radio-group>
      </el-form-item>
    </div>

    <el-card shadow="never" class="table-container">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="feedbackId" width="80" label="编号" />
        <el-table-column
          prop="supervisor.sname"
          width="120"
          label="反馈者姓名"
        />
        <el-table-column prop="province.pname" width="120" label="省份" />
        <el-table-column prop="city.cityName" width="120" label="城市" />
        <el-table-column label="预估污染等级">
          <template #default="scope">
            <el-button type="success" plain v-if="scope.row.aqi.aqiId == 1"
              >优（一）</el-button
            >
            <el-button
              type="success"
              color="#baae00"
              plain
              v-if="scope.row.aqi.aqiId == 2"
              >良（二）</el-button
            >
            <el-button
              type="success"
              color="#ffb000"
              plain
              v-if="scope.row.aqi.aqiId == 3"
              >轻度污染（三）</el-button
            >
            <el-button
              type="success"
              color="#ff4600"
              plain
              v-if="scope.row.aqi.aqiId == 4"
              >中度污染（四）</el-button
            >
            <el-button
              type="success"
              color="#006bff"
              plain
              v-if="scope.row.aqi.aqiId == 5"
              >重度污染（五）</el-button
            >
            <el-button
              type="success"
              color="#b000ff"
              plain
              v-if="scope.row.aqi.aqiId == 6"
              >严重污染（六）</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="照片">
          <template #default="scope">
            <el-image
              style="
                width: 100px;
                height: 100px;
                background-color: #fff;
                z-index: 9999;
              "
              :src="
                baseUrl + '/admin-api/file/imgId/' + scope.row.fileUploadImgId
              "
            />
          </template>
        </el-table-column>
        <el-table-column sortable prop="fdatetime" width="120" label="日期">
          <template #default="scope">
            {{ formatDate(new Date(scope.row.fdatetime)) }}
          </template>
        </el-table-column>
        <el-table-column width="100" label="时间">
          <template #default="scope">
            {{ formatTime(new Date(scope.row.fdatetime)) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              v-if="scope.row.state == 0"
              link
              type="primary"
              size="small"
              @click="assign(scope.row)"
            >
              去指派
            </el-button>
            <el-button
              link
              type="primary"
              size="small"
              @click="details(scope.row)"
            >
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 20px"
        background
        layout="total, prev, pager, next, jumper"
        :total="pageRes.totalRow"
        :page-size="params.pageSize"
        @current-change="pageChange"
      />
    </el-card>
    <el-dialog v-model="assignDialogFormVisible" title="指派" width="800">
      <el-descriptions title="" :column="3" border>
        <el-descriptions-item label="反馈用户">
          {{ curRow.supervisor.sname }}
        </el-descriptions-item>
        <el-descriptions-item label="省份">{{
          curRow.province.pname
        }}</el-descriptions-item>
        <el-descriptions-item label="城市">{{
          curRow.city.cityName
        }}</el-descriptions-item>
        <el-descriptions-item label="详细地址">{{
          curRow.faddress
        }}</el-descriptions-item>
        <el-descriptions-item label="AQI等级"
          ><el-tag size="small" style="margin-right: 10px">{{
            curRow.aqi.aqiStr
          }}</el-tag
          ><el-tag size="small" style="margin-right: 10px">{{
            curRow.aqi.aqiLevel
          }}</el-tag></el-descriptions-item
        >
        <el-descriptions-item label="描述">
          {{ curRow.finfo }}
        </el-descriptions-item>
        <el-descriptions-item label="时间">
          {{ formatDateTime(new Date(curRow.fdatetime)) }}
        </el-descriptions-item>
        <el-descriptions-item label="图片">
          <el-image
            style="
              width: 100px;
              height: 100px;
              background-color: #fff;
              z-index: 9999;
            "
            :src="baseUrl + '/admin-api/file/imgId/' + curRow.fileUploadImgId"
            :preview-src-list="[
              baseUrl + '/admin-api/file/imgId/' + curRow.fileUploadImgId,
            ]"
          />
        </el-descriptions-item>
      </el-descriptions>
      <el-form
        :model="form"
        label-width="auto"
        style="max-width: 400px; margin-top: 20px"
      >
        <el-form-item label="是否异地">
          <el-switch @change="switchChange" v-model="form.isOtherLocation" />
        </el-form-item>
        <div v-if="form.isOtherLocation">
          <el-form-item label="所在省">
            <el-select
              @change="assignProvinceChange"
              v-model="form.province"
              placeholder="请选择省份"
            >
              <el-option
                v-for="v in provinceList"
                :key="v.provinceId"
                :label="v.pname"
                :value="v.provinceId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="所在市">
            <el-select
              @change="assignCityChange"
              v-model="form.city"
              placeholder="请选择市"
            >
              <el-option
                v-for="v in cityList"
                :key="v.cityId"
                :label="v.cityName"
                :value="v.cityId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="指派给" style="width: 240px">
            <el-select v-model="form.gridId" placeholder="请选择网格员">
              <el-option
                v-for="v in gridList"
                :key="v.gridId"
                :label="v.gname"
                :value="v.gridId"
              />
            </el-select>
          </el-form-item>
        </div>
        <div v-else>
          <el-form-item label="所在省市">
            {{ curRow.province.pname }} {{ curRow.city.cityName }}
          </el-form-item>
          <el-form-item label="指派给" style="width: 240px">
            <el-select v-model="form.gridId" placeholder="请选择网格员">
              <el-option
                v-for="v in gridList"
                :key="v.gridId"
                :label="v.gname"
                :value="v.gridId"
              />
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="assignDialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submitAssign()"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="detailsDialogFormVisible" title="查看详情" width="800">
      <el-descriptions title="" :column="1" border>
        <el-descriptions-item label="公众监督反馈信息编号">
          {{ curRow.feedbackId }}
        </el-descriptions-item>
        <el-descriptions-item label="反馈者信息">
          {{ curRow.supervisor.sname }}
          <el-tag size="small" style="margin-right: 10px; margin-left: 10px">
            {{ curRow.supervisor.ssex == 0 ? "女" : "男" }}</el-tag
          >
          <el-tag size="small" style="margin-right: 10px">{{
            formatDate(new Date(curRow.supervisor.sbirth))
          }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="反馈者联系电话">{{
          curRow.supervisor.sphone
        }}</el-descriptions-item>
        <el-descriptions-item label="反馈信息所在地址">
          <el-tag size="small" style="margin-right: 10px">{{
            curRow.province.pname
          }}</el-tag>
          <el-tag size="small" style="margin-right: 10px">{{
            curRow.city.cityName
          }}</el-tag>
          <el-tag size="small" style="margin-right: 10px">{{
            curRow.faddress
          }}</el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="描述">
          {{ curRow.finfo }}
        </el-descriptions-item>
        <el-descriptions-item label="预估等级" v-if="curRow.aqiPreId == 1">
          <el-tag size="small" style="margin-right: 10px">一级</el-tag>
          <el-tag size="small">优</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="预估等级" v-if="curRow.aqiPreId == 2">
          <el-tag size="small" style="margin-right: 10px">二级</el-tag>
          <el-tag size="small">良</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="预估等级" v-if="curRow.aqiPreId == 3">
          <el-tag size="small" style="margin-right: 10px">三级</el-tag>
          <el-tag size="small">轻度污染</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="预估等级" v-if="curRow.aqiPreId == 4">
          <el-tag size="small" style="margin-right: 10px">四级</el-tag>
          <el-tag size="small">中度污染</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="预估等级" v-if="curRow.aqiPreId == 5">
          <el-tag size="small" style="margin-right: 10px">五级</el-tag>
          <el-tag size="small">重度污染</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="预估等级" v-if="curRow.aqiPreId == 6">
          <el-tag size="small" style="margin-right: 10px">六级</el-tag>
          <el-tag size="small">严重污染</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="反馈日期时问">
          <el-tag size="small" style="margin-right: 10px">{{
            formatDate(new Date(curRow.fdatetime))
          }}</el-tag>
          <el-tag size="small">{{
            formatTime(new Date(curRow.fdatetime))
          }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="指派网格员" v-if="curRow.gridId">
          <span style="margin-right: 20px">{{
            curRow.grid.gname || "暂无网格员信息"
          }}</span>
          <span>{{ curRow.grid.gphone || "暂无网格员信息" }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="是否异地指派" v-if="curRow.gridId">
          <el-tag :type="curRow.isOtherLocation === 0 ? 'success' : 'warning'">
            {{ curRow.isOtherLocation === 0 ? "非异地指派" : "异地指派" }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="图片">
          <el-image
            style="
              width: 100px;
              height: 100px;
              background-color: #fff;
              z-index: 9999;
            "
            :src="baseUrl + '/admin-api/file/imgId/' + curRow.fileUploadImgId"
            :preview-src-list="[
              baseUrl + '/admin-api/file/imgId/' + curRow.fileUploadImgId,
            ]"
          />
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="detailsDialogFormVisible = false"
            >返回</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import FeedbackAPI from "@/api/feedback";
import DistrictAPI from "@/api/district";
import { ElMessage } from "element-plus";

const params: any = ref({
  aqiPreId: null,
  beginNum: 0,
  fcity: null,
  fdatetime: null,
  fprovince: null,
  pageNum: 1,
  pageSize: 4,
  state: 0,
});

const baseUrl = import.meta.env.VITE_APP_BASE_API;

const form: any = reactive({
  gridId: "",
  province: "",
  city: "",
  isOtherLocation: false,
});

const provinceList: any = ref([]);

const cityList: any = ref([]);

const assignDialogFormVisible = ref(false);

const detailsDialogFormVisible = ref(false);

const curRow: any = ref({});

const pageRes = ref({
  totalPage: 0,
  totalRow: 0,
});

const gridList: any = ref([]);

const tableData: any = ref([]);

function reqFeedbackList() {
  FeedbackAPI.feedbackList(params.value).then((res) => {
    console.log(res);
    tableData.value = [];
    pageRes.value.totalPage = res.totalPage;
    pageRes.value.totalRow = res.totalRow;
    if (res.feedbackList == null) return;
    for (const v of res.feedbackList) {
      tableData.value.push(v);
    }
  });
}

function reqGridList(city: any) {
  FeedbackAPI.getGridList(city).then((res) => {
    gridList.value = [];
    for (const v of res) {
      gridList.value.push(v);
    }
  });
}

function pageChange(v: any) {
  console.log(v);
  console.log();
  params.value.pageNum = v;
  reqFeedbackList();
}

function pad(num: any) {
  return num.toString().padStart(2, "0");
}

function formatDateTime(date: any) {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hour = date.getHours();
  const minute = date.getMinutes();
  const second = date.getSeconds();
  return `${year}-${pad(month)}-${pad(day)} ${pad(hour)}:${pad(minute)}:${pad(
    second
  )}`;
}

function formatDate(date: any) {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hour = date.getHours();
  const minute = date.getMinutes();
  const second = date.getSeconds();
  return `${year}-${pad(month)}-${pad(day)}`;
}

function formatTime(date: any) {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hour = date.getHours();
  const minute = date.getMinutes();
  const second = date.getSeconds();
  return `${pad(hour)}:${pad(minute)}:${pad(second)}`;
}

function assign(row: any) {
  curRow.value = row;
  console.log(curRow.value);
  form.gridId = "";
  form.province = "";
  form.city = "";
  form.isOtherLocation = false;
  assignDialogFormVisible.value = true;
  reqGridList(curRow.value.fcity);
}

function details(row: any) {
  curRow.value = row;
  console.log(curRow.value);
  detailsDialogFormVisible.value = true;
}

function switchChange(v: any) {
  console.log(v);
  form.gridId = "";
  form.province = "";
  form.city = "";
  reqProvinceList();
  if (v == false) {
    reqGridList(curRow.value.city.cityId);
  } else {
    gridList.value = [];
  }
}

function stateRadioChange(v: any) {
  console.log(v);
  reqFeedbackList();
}

function datePickerChange(v: any) {
  console.log(v);
}

onMounted(() => {
  reqFeedbackList();
  reqProvinceList();
});

function reqProvinceList() {
  DistrictAPI.provinceList().then((res) => {
    provinceList.value = [];
    for (const v of res) {
      provinceList.value.push(v);
    }
  });
}

function reqCityList(provinceId: any) {
  DistrictAPI.cityList(provinceId).then((res) => {
    cityList.value = [];
    for (const v of res) {
      cityList.value.push(v);
    }
  });
}

function submitAssign() {
  form.feedbackId = curRow.value.feedbackId;
  FeedbackAPI.submitAssign(form).then((res) => {
    console.log(res);
    assignDialogFormVisible.value = false;
    form.gridId = "";
    reqFeedbackList();
    ElMessage({
      showClose: true,
      message: "提交成功",
      type: "success",
    });
  });
}

function provinceChange(v: any) {
  console.log(v);
  cityList.value = [];
  reqCityList(params.value.fprovince);
}

function assignCityChange(v: any) {
  form.gridId = "";
  reqGridList(v);
}

//省份选择改变，两个已选择清空，对应可选择列表清空
function assignProvinceChange(v: any) {
  console.log(v);
  form.gridId = "";
  form.city = "";
  cityList.value = [];
  gridList.value = [];
  reqCityList(form.province);
}

function clearParams() {
  params.value = {
    aqiPreId: null,
    beginNum: 0,
    fcity: null,
    fdatetime: null,
    fprovince: null,
    pageNum: 1,
    pageSize: 4,
    state: 0,
  };
}

function handleSearch() {
  reqFeedbackList();
}
</script>
